﻿table {
    border: 0px; /* border="0" */
    border-collapse: collapse; /* cellspacing="0" */
}

    table td {
        padding: 0px; /* cellpadding="0" */
    }

.same-user {
        margin-top: 5px;
    }

    .another-user {
        margin-top: 15px;
    }

    .comment-div {
        overflow: auto;
    }

/*-----------------------------comment---------------------------------------*/
table.right-comment {
        float: right;
    }

    table.left-comment, table.right-comment {
        max-width: 70%;
    }

        /*avatar section*/
        table.left-comment .avatar, table.right-comment .avatar {
            vertical-align: top;
            width: 32px;
        }

            table.left-comment .avatar img, table.right-comment .avatar img {
                width: 32px;
                height: 32px;
            }

        /*triangel section*/
        table.left-comment .triangle, table.right-comment .triangle {
            vertical-align: top;
            padding-top: 8px;
            width: 5px;
        }

            table.left-comment .triangle div {
                width: 0;
                height: 0;
                border-top: 5px solid transparent;
                border-right: 5px solid gray;
                border-bottom: 5px solid transparent;
            }

            table.right-comment .triangle div {
                width: 0;
                height: 0;
                border-top: 5px solid transparent;
                border-left: 5px solid white;
                border-bottom: 5px solid transparent;
            }

        /*left message section*/
        table.left-comment .message div, table.right-comment .message div {
            background-color: grey;
            border-radius: 4px;
            padding: 8px;
            padding-top: 2px;
        }

            table.left-comment .message div .user-name, table.right-comment .message div .user-name {
                margin: 0;
                margin-top: 5px;
                font-size: x-small;
                color: lightgray;
            }

            table.left-comment .message div .date, table.right-comment .message div .date {
                margin: 0;
                margin-top: 5px;
                font-size: x-small;
                text-align: right;
                color: lightgray;
            }

        /*right message section*/
        table.right-comment .message div {
            background-color: white;
        }

            table.right-comment .message div .user-name {
                text-align: right;
                color: grey;
            }

            table.right-comment .message div .date {
                text-align: left;
                color: grey;
            }
/*--------------------------end comment---------------------------------------*/
/*-------------------------send comment---------------------------------------*/
.send-comment {
        width: 500px;
        margin: auto;
        background-color: lightgray;
        padding: 10px;
    }

        .send-comment table {
            width: 100%;
        }

        .send-comment .avatar img {
            height: 64px;
            width: 64px;
        }

        .send-comment .triangel div {
            width: 0;
            height: 0;
            border-top: 5px solid transparent;
            border-right: 5px solid white;
            border-bottom: 5px solid transparent;
        }

        .send-comment .message {
            width: 100%;
            vertical-align: top;
        }

            .send-comment .message textarea, .send-comment .message input[type="text"] {
                width: 95%;
                color: #979797;
                padding: 10px;
                text-decoration: none;
                border: 0;
                border-radius: 4px;
                resize: none;
            }

            .send-comment .message input[type="text"] {
                padding: 5px;
                padding-left: 10px;
            }

        .send-comment .button input[type="button"] {
            border-radius: 4px;
            background-color: #1957eb;
            color: white;
            padding: 8px;
            border: 1px solid grey;
        }
/*-----------------------end send comment---------------------------------------*/